<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <input id="js_file" type="file">

    <input id="js_time" type="number" value="1" placeholder="请输入帧数">

    <button id="js_button">提取</button>


    <div id="js_info"></div>

    <div id="js_result"></div>

    <script src="../dist/video-frame-capture.min.js"></script>

    <script>
        let button = document.querySelector('#js_button');
        let resultContainer = document.querySelector('#js_result');
        let fileInput = document.querySelector('#js_file');
        let timeInput = document.querySelector('#js_time');
        let infoContainer = document.querySelector('#js_info');
        button.addEventListener('click', (e) => {
          let file = fileInput.files[0];
          if(!file) {
            alert('请选择文件')
            return
          }
          // 获取文件所有帧图片
          videoFrameCapture.getVideoFrameCount(file).then(data => console.log(data)).catch(err => {
            console.log(err)
          })
          // 获取文件所有帧图片
          // videoFrameCapture.getAllFramePicture(file).then(data => console.log(data)).catch(err => {
          //   console.log(err)
          // })
          // 获取文件指定帧图片
          // videoFrameCapture.getVideoFramePictureByIndex(file, timeInput.value).then((imageInfo) => {
          //   const {
          //     imageDataBuffer,
          //     width,
          //     height
          //   } = imageInfo;
          //   let canvas = document.createElement('canvas');
          //   let ctx = canvas.getContext('2d');
          //   canvas.width = width;
          //   canvas.height = height;

          //   const imageData = new ImageData(imageDataBuffer, width, height);
          //   ctx.putImageData(imageData, 0, 0, 0, 0, width, height);
          //   const dataURL = canvas.toDataURL('image/jpeg')

          //   resultContainer.innerHTML = `<img src="${dataURL}" />`
          // })
        });
    </script>
</body>

</html>